<script lang="ts" setup>
import BpmnJS from 'bpmn-js/lib/Modeler';
const props = defineProps({
  processDefinitionDiagramResourceRaw: {
    type: String,
    required: true
  }
});

const show = async () => {
  const container = document.querySelector('#canvas') as HTMLElement;
  const viewer = new BpmnJS({
    container
  });
  try {
    viewer.importXML(props.processDefinitionDiagramResourceRaw);
    const canvas = viewer.get('canvas') as any;
    canvas.zoom('fit-viewport', 'auto');
    canvas.zoom(1);
  } catch (err) {
    console.log(err);
  }
};
onMounted(() => show());
</script>
<template>
  <div id="canvas"></div>
</template>
<style lang="scss" scoped>
#canvas {
  height: 600px;
}
</style>
